<template>
  <div>
    <div class="title">
      <div>
        <p style="color: #ffffff">留言板</p>
        <p>您好！欢迎回来！</p>
      </div>
    </div>
    <div class="content">
      <div class="content_left">
        <ul v-for="(item, index) in list" :key="index">
          <li>
            <p>{{ item.content }}</p>
            <template>
              <el-button
                type="danger"
                @click="delete item.cid"
                style="padding: 5px 10px"
                ><i class="el-icon-delete"></i> 删除</el-button
              >
            </template>
            <span>用户名：{{ item.username }}</span>
            <span>赞数：{{ item.support }}</span>
            <span>踩数：{{ item.oppose }}</span>
            <span>发布时间：{{ item.ctime }}</span>
          </li>
        </ul>
      </div>
      <div class="content_center">
        <div class="register" v-if="register_show">
          <el-form
            :model="form"
            ref="addForm"
            :rules="rules"
            label-width="30px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="姓名"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="密码"
              :label-width="formLabelWidth"
              prop="pwd"
              show-password
            >
              <el-input v-model="form.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-button @click="registerfun" style="margin-left: 100px"
              >注册</el-button
            >
            <el-button @click="resetForm('addForm')">重置</el-button>
          </el-form>
        </div>
        <div class="login" v-if="login_show">
          <el-form
            :model="form_login"
            ref="Form_login"
            :rules="rules"
            label-width="30px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="姓名"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input v-model="form_login.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="密码"
              :label-width="formLabelWidth"
              prop="pwd"
              show-password
            >
              <el-input v-model="form_login.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-button @click="loginfun" style="margin-left: 100px"
              >登录</el-button
            >
            <el-button @click="resetForm('Form_login')">重置</el-button>
          </el-form>
        </div>
        <div class="message" v-if="message_show">
          <h3 style="line-height: 60px">请留言</h3>
          <el-input type="textarea" v-model="message"></el-input>
          <el-button @click="submit()">发布</el-button>
          <el-button @click="message = ''">重置</el-button>
        </div>
      </div>
      <div class="content_right">
        <img src="../assets/MBH-3.jpg" alt="" />
        <img src="../assets/MBH-3.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      form: {
        name: "",
        pwd: "",
      },
      form_login: {
        name: "",
        pwd: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度应大于6个字符", trigger: "blur" },
        ],
      },
      formLabelWidth: "60px",
      message: "",
      uid: null,
      register_show: true,
      login_show: true,
      message_show: false,
    };
  },
  methods: {
    // 列表
    listfun() {
      // http://192.168.1.24:5000
      axios
        .get("http://192.168.1.24:5000/list", {
          params: {
            page: 1,
            page_size: 3,
          },
        })
        .then((response) => {
          console.log(response);
          this.list = response.data.list;
          this.uid = response.data.uid;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 注册
    registerfun() {
      axios
        .post("http://192.168.1.24:5000/user/register", {
          username: this.form.name,
          pwd: this.form.pwd,
        })
        .then((response) => {
          
          this.$message({
            message: "恭喜你，你已经注册成功！",
            type: "success",
          });
          this.register_show = false;
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 登录
    loginfun() {
      axios
        .post("http://192.168.1.24:5000/user/login", {
          username: this.form_login.name,
          pwd: this.form_login.pwd,
        })
        .then((response) => {
          console.log(response);
          this.message_show = true;
          this.$message({
            message: "恭喜你，你已经登录成功！",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 发布留言
    submit() {
      axios
        .post("http://192.168.1.24:5000/add", {
          uid: this.uid,
          content: this.message,
        })
        .then((response) => {
          console.log(response);
          this.$message({
            message: "恭喜你，你已经发布成功！",
            type: "success",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 删除
    delete(cid) {
      axios
        .get("http://192.168.1.24:5000/del", {
          params: {
            id: cid,
          },
        })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.listfun();
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  background: red;
  height: 50px;
}
.title > div {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: auto;
}
.title > div > p {
  color: #ffffff;
  line-height: 50px;
}
.content {
  display: flex;
  justify-content: space-around;
}
.content_left {
  width: 600px;
}
.content_center {
  width: 300px;
}
.content_center > div {
  margin-top: 20px;
}
img {
  width: 300px;
  height: 400px;
  margin: 10px 20px;
}
</style>